
const cen1 = document.querySelector(".cen1");
const pic = document.querySelector(".cen1 img");
const leftButton = document.querySelector(".c1-left");
const rightButton = document.querySelector(".c1-right");

const li = document.querySelectorAll(".c1-bottom span");

const input = document.querySelector(".search-input");
const history = document.querySelector(".search-history");
const history_ul = document.querySelector(".search-history .history-list")
console.log(history_ul);


//  轮播图
const picList = [
    "./assets/pic_01.jpg",
    "./assets/pic_02.jpg",
    "./assets/pic_03.jpg",
];

let index = 0;

// 切换图片src
function changePic(index) {
    pic.src = picList[index];
}

// 切换小圆点样式
function changeLi(index){
    li.forEach(item=>{
        item.classList.remove("active");
    });
    li[index].classList.add("active");
}

// 切换图片入口方法
function change(c){
    // const temp  = index +c;
    // index= temp;
    // if(temp<0){
    //     index = picList.length-1;
    // }
    // else if(temp>picList.length-1){
    //     index = 0;
    // }
    index = (index +c)%3;
    changePic(index);
    changeLi(index);
}

leftButton.addEventListener("click",e=>{
    change(-1)
})
rightButton.addEventListener("click",e=>{
    change(1)
})

let timerId = setInterval(()=>{
    rightButton.click();
},1000)

cen1.addEventListener("mouseenter",e=>{
    clearInterval(timerId);
});

cen1.addEventListener("mouseleave",e=>{
    clearInterval(timerId);
    timerId = setInterval(()=>{
        rightButton.click();
    },1000);
});



// 搜索下拉框
function historyHidden(e){
    setTimeout(() => {
        console.log("失焦点事件");
        history.style.display = "none";
    }, 100); // 延迟执行blur的处理
}


input.addEventListener("focus",e=>{
    console.log("焦点事件");
    history.style.display = "block";
})

history.addEventListener("click",e=>{
    e.stopPropagation();
    console.log("点击事件");
    input.value = e.target.innerText;
    // setTimeout(() => { input.focus(); }, 100)
})

input.addEventListener("blur",historyHidden);


// 右侧导航栏点击事件

const list = document.querySelector(".float ul");

const header  = document.querySelector(".header");
const headerTop = header.offsetTop;

const gg = document.querySelector(".gg");
const ggTop = gg.offsetTop;

const navigation = document.querySelector(".navigation");
const navigationTop =navigation.offsetTop;

const main = document.querySelector(".main");
const mainTop = main.offsetTop;



let map = {
    "gg": ggTop,
    "navigation": navigationTop,
    "main": mainTop,
    "header": headerTop
}

list.addEventListener("click", function(e){
    if(e.target.tagName === 'A'){
        //  除非在a标签里面写 href="javascript:;"不然要阻止默认事件
        e.preventDefault();
        // e.stopPropagation();
        const old = document.querySelector(".float ul .active");
        console.log(old);
        if(old){
            old.classList.remove("active");
        }
        e.target.classList.add("active");

        const key = e.target.dataset['name'];
        console.log(key);
        console.log( map[key]);
        // 移动到对应的位置
        // window.scrollTo = -map[key]+'px';
        document.documentElement.scrollTop = map[key];
        console.log(document.documentElement.scrollTop);
        // document.documentElement.scrollTop = 1000

    }
    
}
)

window.addEventListener("scroll",e=>{
    // 先将样式都去除
    const old = document.querySelector(".float ul .active");
    console.log(old);
    if(old){
        old.classList.remove("active");
    }
    
    // html滚动的距离 大于 某些， 则某些高亮
    const scrollTop = document.documentElement.scrollTop;

    if(scrollTop >= headerTop && scrollTop< ggTop){
        document.querySelector(".float ul a[data-name='header']").classList.add("active");
        
    } else if ( scrollTop >= ggTop && scrollTop < navigationTop){
        document.querySelector(".float ul a[data-name='gg']").classList.add("active");

    } else if ( scrollTop >= navigationTop && scrollTop < mainTop){
        document.querySelector(".float ul a[data-name='navigation']").classList.add("active");
    } else {
        document.querySelector(".float ul a[data-name='main']").classList.add("active");
    }

    
})